<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>兑换记录</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="../css/sm.min.css">
    <link rel="stylesheet" href="../css/sm-extend.min.css">
    <script type="text/javascript" src="../common/common.js"></script>
    
<style type="text/css">
  	/*css 的样式都放在这里*/
  	#exchange_img img{
  		width: 100px;
  		height: 100px;
  	}
  	.exchange_div_auto{
  		width: auto;
  		/*border: solid 1px red;*/
  	}
  	#exchange{
  		display: flex;
  		justify-content: space-between;
  		margin: 10px;
  		padding: 10px;
  		border: solid 1px gainsboro;
  		width: 100%
  	}
  	.message{
  		display: flex;
  	}
  	.todisplay{
  		display: none;
  		/*display: flex;
		align-items: center;*/
  	}
  	.introduce{
  		margin-left: 1rem;
  		display: flex;
  		align-items: center;
  	}
  	#content{
  		/*background-color: white;
  		padding-bottom: 10px;
  		padding-top: 10px;*/
  	}
  	#nicknameid{
  		font-weight: 700;
  	}
  	.zhongfen{
  		/*color: red;
  		border: solid 1px red;
  		padding-bottom: 1rem;
  		padding-top: 1rem;*/
  	}
  	.list-block .item-content{
  		padding-left: 0;
  	}
  	.list-block{
  		margin: 0;
  	}
</style>


</head>
<body>
<div class="page-group">
    <div class="page page-current">
        <!-- html代码内容区域 -->
		<div id="content">
			
			
			<!--<div id="exchange">
				<div class="message">
					<div id="exchange_img" class="exchange_div_auto">
						<img src="../img/btn_downfile.jpg"/>
					</div>
					<div id="" class="exchange_div_auto introduce">
						<span id="">
							<span id="">
								火龙果
							</span>
							<br />
							<span id="">
								积分80分
							</span>
							<br />
							<span id="">
								兑换时间
							</span>
						</span>
					</div>
				</div>
				<div id="" class="exchange_div_auto todisplay">
					暂定
				</div>
			</div>-->
			<!--<div id="exchange">
				<div class="message">
					<div id="exchange_img" class="exchange_div_auto">
						<img src="../img/btn_downfile.jpg"/>
					</div>
					<div id="" class="exchange_div_auto introduce">
						<span id="">
							<span id="">
								火龙果
							</span>
							<br />
							<span id="">
								积分80分
							</span>
							<br />
							<span id="">
								兑换时间
							</span>
						</span>
					</div>
				</div>
				<div id="" class="exchange_div_auto todisplay">
					暂定
				</div>
			</div>-->
			<div class="content infinite-scroll infinite-scroll-bottom" data-distance="1" ><!--style="top: 100px;"-->
	          	<div class="list-block">
             	 	<ul class="list-container">
	              	</ul>
	          	</div>
	          	<!-- 加载提示符 -->
	          	<div class="infinite-scroll-preloader">
	              	<div class="preloader"></div>
	          	</div>
	      	</div>
			
		</div>
		
    </div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="https://gitee.com/huaflower/CommonScoreShop/raw/master/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='https://gitee.com/huaflower/CommonScoreShop/raw/master/js/sm-extend.min.js' charset='utf-8'></script>


<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”
	var start = 0;
	var count = 10;
	var loading = false;
	var arrdata = new Array();

  //一般app 初始化 html 传参数，函数名固定
  	function getParams(){
	    

  		$$(".list-container").html("");
	    start = 0;


  		requestData();

  	}



  	function requestData(){

		var params = {
			callbacktype:'orderlist',
	    	user_id:curuserid,
	    	start:start,
	    	count:count
	    }

	    

	    //网络请求框架，需要传入成功函数回调和 失败函数回调
	    net_request('get','orderlist',params,successCallBack,errorCallBack);

  	}
  
  


  //成功的回调函数
  	function successCallBack(data){
    	// isNotNull() 用来判断字段不为空
      	if(isNotNull(data)){
         	console.log(data);
			if(isNotNull(data.body)&&data.body.length>0){
				arrdata = data.body;
				start = arrdata.length+start;

				for(var e=0;e<arrdata.length;e++){
					var nickname= "";
					var score ="";
					var updated_at ="";
					var img = "";
					if(isNotNull(arrdata[e].name)){
						nickname = arrdata[e].name;
					}
					if(isNotNull(arrdata[e].score)){
						score = '<span style="color:red;">'+arrdata[e].score+'&nbsp;</span><span>积分</span>';
					}
					if(isNotNull(arrdata[e].redeem) && arrdata[e].redeem == '1'){
						score = '<span style="color:red;">1&nbsp;</span><span>提货券</span>';
					}
					if(isNotNull(arrdata[e].updated_at)){
						updated_at = arrdata[e].updated_at;
					}
					if(isNotNull(arrdata[e].img)){
						img = arrdata[e].img;
					}
					var stringlist ='\
								<li class="item-content" onclick="itemClick('+e+')">\
									<div id="exchange">\
										<div class="message">\
											<div id="exchange_img" class="exchange_div_auto">\
												<img src="'+img+'"/>\
											</div>\
											<div id="" class="exchange_div_auto introduce">\
												<span id="">\
													<span id="nicknameid">\
														'+nickname+'\
													</span>\
													<br />\
													<span id="" class="zhongfen">\
														'+score+'\
													</span>\
													<br />\
													<span id="">\
														'+updated_at+'\
													</span>\
												</span>\
											</div>\
										</div>\
										<div id="" class="exchange_div_auto todisplay">\
											暂定\
										</div>\
									</div>\
								<li>\
							';
					$$(".list-container").append(stringlist);
					
				}
				$('.infinite-scroll-preloader').remove();
				/*if (strdata.length < count) {
	                  // 加载完毕，则注销无限加载事件，以防不必要的加载
	                  // $.detachInfiniteScroll($('.infinite-scroll'));
	                  // 删除加载提示符
	                  $('.infinite-scroll-preloader').remove();
	                  return;
	            }*/
			}else{
				$('.infinite-scroll-preloader').remove();
			}
      	}
  	}

// 	失败的回调函数
  	function errorCallBack(data){
    	console.log(data);
  	}
  	
  	 
      // 注册'infinite'事件处理函数
      $(document).on('infinite', '.infinite-scroll-bottom',function() {

          	if(!loading && arrdata.length >= count){//只有没有正在加载中  和 非最后一次的滑动都请求加载数据，防止滑动多次加载
          		loading = true;
    			requestData();

          	}  		
              



              $.refreshScroller();
      });



      //item兑换记录点击
      function itemClick(index){
      		if(isNotNull(arrdata)&&arrdata.length>0){
      			var strdata = JSON.stringify(arrdata[index]);
      			native_goto('local/jifen_details?strdata='+strdata);
      		}
      }

   	// 初始化区域
  	$$(function () {
//		$$("#content").html("");
		// getParams("xx");
		getParams();
      	$.init();
   	});

    
</script>
</body>
</html>